<script setup lang="ts">
  import { ref, shallowRef } from 'vue';
  import { Modal } from '@arco-design/web-vue';
  import { queryElderDetail, deleteElder } from '@/api/file-management/file';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import { useRoute, useRouter } from 'vue-router';
  import { getDictLabel } from '@/utils/dict';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';

  import EditElder from './edit-modal/edit-elder.vue';
  import EditBed from './edit-modal/edit-bed.vue';
  import EditService from './edit-modal/edit-service.vue';

  const route = useRoute();

  const elderlyId = route.query.id as string;

  const renderBadInfo = (data: any) => {
    return [
      {
        label: '所在院区',
        value: data.branchName,
      },
      {
        label: '所在建筑',
        value: data.buildingName,
      },
      {
        label: '所在楼层',
        value: `${data.floorNumber}楼`,
      },
      {
        label: '房间号',
        value: data.roomNo,
      },
      {
        label: '床位号',
        value: data.bedNo,
      },
    ];
  };

  const renderServiceInfo = (data: any) => {
    return [
      {
        label: '服务人员',
        value: data.serviceStaff.map((e: any) => e.serviceStaffName).join('，'),
      },
      {
        label: '药品柜',
        value: data.medStewardSn,
      },
      {
        label: '储药仓',
        value: data.stockDrawerSn,
      },
      {
        label: '用药仓',
        value: data.medicalDrawerSn,
      },
    ];
  };

  const elderData = shallowRef();

  const detailData = async (data: any) => {
    elderData.value = data;
    const idCardType = await getDictLabel('ElderCardType', data.idCardType);
    const gender = await getDictLabel('Gender', data.gender);
    const status = await getDictLabel('ElderStatus', data.status);

    const info = [
      {
        label: '长者ID',
        value: data.elderId,
      },
      {
        label: '长者姓名',
        value: data.elderName,
      },
      {
        label: '长者状态',
        value: status,
      },
      {
        label: '长者性别',
        value: gender,
      },
      {
        label: '长者年龄',
        value: data.age,
      },
      {
        label: '证件类型',
        value: idCardType,
      },
      {
        label: '证件号码',
        value: data.idCardNo,
      },
      {
        label: '家属姓名',
        value: data.emergentContactName,
      },
      {
        label: '家属电话',
        value: data.emergentContactPhone,
      },
      {
        label: '创建时间',
        value: data.createTime,
      },
    ];

    return {
      elder: info,
      bed: renderBadInfo(data),
      service: renderServiceInfo(data),
    };
  };

  const detailSkeleton = useSkeleton({
    initQueryParams: [elderlyId],
    apiFun: queryElderDetail,
    transformDataFun(data) {
      return detailData(data);
    },
  });

  const editElderModal = useModeModalHandler({
    onSuccess() {
      detailSkeleton.retry();
    },
  });

  const editBedModal = useModeModalHandler({
    onSuccess() {
      detailSkeleton.retry();
    },
  });

  const editServiceModal = useModeModalHandler({
    onSuccess() {
      detailSkeleton.retry();
    },
  });

  const editBed = () => {
    editBedModal.showEdit(elderData.value);
  };
  const editService = () => {
    editServiceModal.showEdit(elderData.value);
  };

  const editElder = () => {
    editElderModal.showEdit(elderData.value);
  };

  const router = useRouter();

  const onDelete = () => {
    Modal.warning({
      title: '确定删除该长者吗？',
      content:
        '提示：与长者关联的床位、储药仓、用药仓、用药计划及护理员将全部取消关联。',
      onBeforeOk(done) {
        deleteElder(elderData.value.elderId)
          .then(() => {
            done(true);
            router.back();
          })
          .catch(() => {
            done(false);
          });
      },
      hideCancel: false,
    });
  };

  const tabActive = ref(1);

  const edit = () => {
    if (tabActive.value === 1) {
      editBed();
    } else {
      editService();
    }
  };
</script>

<template>
  <div class="h-full relative">
    <Teleport defer to="#title-extra">
      <a-space>
        <ae-button
          purpose="delete"
          :icon="false"
          size="small"
          @click="onDelete"
        >
          删除
        </ae-button>

        <ae-button purpose="edit" :icon="false" size="small" @click="editElder">
          编辑
        </ae-button>
      </a-space>
    </Teleport>
    <EditElder v-bind="editElderModal.bindProps" />
    <EditBed v-bind="editBedModal.bindProps" />
    <EditService v-bind="editServiceModal.bindProps" />

    <ae-button class="absolute bottom-0 right-0" purpose="edit" @click="edit">
      编辑
    </ae-button>
    <div class="h-full">
      <skeleton-view v-slot="{ data }" v-bind="detailSkeleton.bindProps">
        <a-descriptions class="flex-desc" :data="data.elder" />

        <a-tabs v-model:active-key="tabActive" justify class="mt-8">
          <a-tab-pane :key="1" title="床位信息">
            <a-descriptions :data="data.bed" :column="1" />
          </a-tab-pane>
          <a-tab-pane :key="2" title="服务信息">
            <a-descriptions :data="data.service" :column="1" />
          </a-tab-pane>
        </a-tabs>
      </skeleton-view>
    </div>
  </div>
</template>

<style lang="less">
  .arco-modal-simple {
    padding: 10px 20px;
    .arco-modal-footer {
      margin-top: 20px !important;
    }
  }
</style>
